<template>
    <div class="bodyer">
        <div class="header flex">
            <div class="icon"><van-icon name="arrow-left" color="#999" size=".6rem" @click="toHome" /></div>
            <div class="search" @click="Tosear">
                <div class="icon1">
                    <van-icon name="search" color="#ddd" size=".7rem" />
                </div>
                <input type="text" placeholder="推荐搜索 关键词" class="inp" v-model="txt" @change.lazy.enter="toList($event)">
            </div>
            <div class="onSearch" @click="search">搜索</div>
        </div>
        <div class="search_content">
            <div class="hot_list">
                <div class="hot_tit">热搜词</div>
                <div class="hot_items">
                    <span v-for="(item, index) in list" :key="index" @click="add(item)">{{ item }}</span>
                </div>
            </div>
            <div class="history">
                <div class="rem flex">
                    <p>历史搜索</p>
                    <div><van-icon name="cross" color=" #fff" size=".7rem" @click="remove" /></div>
                </div>
                <ul class="upDate">
                    <li v-for="(item, index) in newlist" :key="index">{{ item }}</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
let list = ref(['小米手机', '笔记本', '电脑', '平板', '液晶电视', '家点', '玩具'])
let newlist = ref([])
let date = ref('')
let txt = ref('');
const router = useRouter()
function toHome() {
    router.push('/')
}
function toList(e) {
    date.value = e.target.value
}
function search() {
    newlist.value.push(date.value)
    //  console.log(newlist);
    txt.value = ''
}
function add(item) {
    newlist.value.push(item)
}

function remove() {
    newlist.value = []
}
</script>

<style lang="scss" scoped>
.flex {
    display: flex;
    flex-wrap: nowrap;
}

.bodyer {
    width: 100vw;
    height: 100vh;
    background: #EFEFF4;
    box-sizing: border-box;
    overflow: hidden;
}

.header {
    justify-content: space-around;
    padding-top: 93px;
    align-items: center;

    .onSearch {
        color: #d8182d;
        font-size: 32px;
    }
}

.search_content {
    width: 100%;
    height: 330px;
    padding: 0 32px;
    margin-top: 40px;

    .hot_list {
        width: 100%;
        height: auto;
        box-sizing: border-box;

        .hot_tit {
            color: #d8182d;
            font-size: 29px;
        }

        .hot_items {
            width: 100%;
            height: 160px;

            span {
                height: 30px;
                color: #d8182d;
                font-size: 26px;
                padding: 4px 10px;
                border: 1px solid #d8182d;
                margin: 20px;
                border-radius: 6px;
            }
        }
    }
}

.history {
    width: 100%;
    height: auto;

    .rem {
        width: 100%;
        box-sizing: border-box;
        height: 90px;
        align-items: center;
        justify-content: space-between;

        p {
            width: 300px;
            color: #d8182d;
            font-size: 29px;
        }

        div {
            width: 100px;
            height: 100%;
        }
    }

    .upDate {
        color: #686868;
        font-size: 28px;

        li {
            margin-bottom: 14px;
        }
    }
}

.search {
    width: 550px;
    height: 80px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    background: #ffffff;
    box-sizing: border-box;
    justify-content: space-around;
    border-radius: 10px;
    overflow: hidden;

    .icon1 {
        width: 40px;
        height: 40px;
        padding-left: 30px;
        display: flex;
        align-items: center;
        /*   margin: 0 10px*/
    }

    .inp {
        width: 540px;
        height: 80px;
        outline: none;
        border: transparent;
        font-size: 32px;
        padding: 0 0 0 120px
    }
}
</style>